import React, { useState } from 'react'
import { connect } from 'react-redux'
import { Space, Table, Button, Modal, Input, message } from 'antd'

export const Dialog = ({ addItem }) => {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [userInfo, setInfo] = useState({
        name: '',
        age: null,
        address: ''
    })

    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        userInfo.key = String(Math.random()).slice(4, 10)
        addItem(userInfo)
        setIsModalVisible(false);
        message.success("添加成功")
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    return (
        <div>
            <Button type="primary" onClick={showModal}>
                点我
            </Button>
            <Modal title="新增数据" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <p>
                    <Input value={userInfo.name} onChange={(ev) => {
                        setInfo({
                            ...userInfo,
                            name: ev.target.value
                        })
                    }} placeholder="请输入姓名" />
                </p>
                <p>
                    <Input value={userInfo.age} onChange={(ev) => {
                        setInfo({
                            ...userInfo,
                            age: ev.target.value
                        })
                    }} placeholder="请输入年龄" />
                </p>
                <p>
                    <Input value={userInfo.address} onChange={(ev) => {
                        setInfo({
                            ...userInfo,
                            address: ev.target.value
                        })
                    }} placeholder="请输入住址" />
                </p>
            </Modal>
        </div>
    )
}

const mapStateToProps = (state) => ({})

const mapDispatchToProps = (dispatch) => {
    return {
        addItem(item) {
            dispatch({ type: "ADD_LIST_ITEM", item })
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Dialog)